<template>
    <div class="bg-gray-50 min-h-screen flex items-center justify-center font-sans">
        <div class="w-full max-w-md">
            <!-- Logo 区域 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-robot text-white text-2xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 mb-2">AI Chat</h1>
                <p class="text-gray-600">智能对话助手</p>
            </div>

            <!-- 重置密码表单 -->
            <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">重置密码</h2>

                <!-- 错误提示 -->
                <div v-if="errorMessage" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    {{ errorMessage }}
                </div>

                <!-- 成功提示 -->
                <div v-if="successMessage"
                    class="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ successMessage }}
                </div>

                <form v-if="!isSuccess" @submit.prevent="handleSubmit" class="space-y-6">
                    <div class="text-center mb-6">
                        <p class="text-gray-600">请输入您的邮箱地址，我们将向您发送重置密码的链接。</p>
                    </div>

                    <!-- 邮箱输入 -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">邮箱地址</label>
                        <div class="relative">
                            <input type="email" id="email" name="email" required v-model="email" :disabled="isLoading"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all duration-200 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                placeholder="请输入您的邮箱地址">
                            <i
                                class="fas fa-envelope absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <button type="submit" :disabled="isLoading || !email"
                        class="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 disabled:transform-none">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin mr-2"></i>
                        <i v-else class="fas fa-paper-plane mr-2"></i>
                        {{ isLoading ? '发送中...' : '发送重置链接' }}
                    </button>

                    <!-- 返回登录 -->
                    <div class="text-center">
                        <router-link to="/login"
                            class="text-sm text-emerald-600 hover:text-emerald-700 transition-colors">
                            <i class="fas fa-arrow-left mr-1"></i>
                            返回登录
                        </router-link>
                    </div>
                </form>

                <!-- 成功状态 -->
                <div v-else class="text-center space-y-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-check text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">邮件已发送</h3>
                        <p class="text-gray-600 mb-4">
                            我们已向 <strong>{{ email }}</strong> 发送了重置密码的链接，请查收邮件并按照指示操作。
                        </p>
                        <p class="text-sm text-gray-500">
                            如果您没有收到邮件，请检查垃圾邮件文件夹，或者
                            <button @click="resendEmail"
                                class="text-emerald-600 hover:text-emerald-700 transition-colors">
                                重新发送
                            </button>
                        </p>
                    </div>
                    <router-link to="/login"
                        class="inline-block px-6 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                        返回登录
                    </router-link>
                </div>
            </div>

            <!-- 底部信息 -->
            <div class="text-center mt-8 text-sm text-gray-500">
                <p>© 2024 AI Chat. 保留所有权利.</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { forgotPasswordAPI } from '@/http/chatAPI'

const isLoading = ref(false)
const isSuccess = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const email = ref('')

const clearMessages = () => {
    errorMessage.value = ''
    successMessage.value = ''
}

const handleSubmit = async () => {
    clearMessages()

    if (!email.value) {
        errorMessage.value = '请输入邮箱地址'
        return
    }

    isLoading.value = true

    try {
        await forgotPasswordAPI(email.value)
        isSuccess.value = true
        successMessage.value = '重置邮件已发送'
    } catch (error: any) {
        errorMessage.value = error.message || '发送失败，请重试'
    } finally {
        isLoading.value = false
    }
}

const resendEmail = () => {
    isSuccess.value = false
    handleSubmit()
}
</script>

<style scoped>
.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fa-spin {
    animation: spin 1s linear infinite;
}
</style>
